import React, { useState, useEffect } from "react";
import Constants from "expo-constants";
import {
    Button,
    Text,
    TextInput,
    View,
    ScrollView,
    Pressable,
    StyleSheet,
    Image,
    FlatList,
} from "react-native";
import { Picker } from "@react-native-picker/picker";
import axios from "axios";
import Icon from "react-native-vector-icons/AntDesign";
import Icon1 from "react-native-vector-icons/Ionicons";
import IconFontAwesome from "react-native-vector-icons/FontAwesome";
import { useNavigation } from "@react-navigation/native";
import AsyncStorage from "@react-native-async-storage/async-storage";
const myImage = require("../assets/guide.png");
const leftbutton = require("../assets/leftbutton.png");
const rightbutton = require("../assets/rightbutton.png");
const ActivityTypes = [
    "自习",
    "电影",
    "聚餐",
    "拼车",
    "拼单",
    "游戏",
    "运动",
    "旅行",
    "其他",
];
const color = [
    "#4094F7",
    "#FE6386",
    "#F6A514",
    "#FD7C42",
    "#FE655F",
    "#00B773",
    "#B758FD",
    "#03BBD1",
    "#4CA4FD",
];

const MyActivity = () => {
    const navigation = useNavigation();
    const [selectedActivity, setSelectedActivity] = useState("");
    const [postText, setPostText] = useState("");
    const [userInfo, setUserInfo] = useState({});
    const [activityList, setActivityList] = useState([]);
    const activity = [
        {
            key: "1",
            icon: "female",
            iconcolor: "#EA7C75",
            tag: "游戏",
            title: "下午杭麻三缺一不打钱2-5",
            name: "多多混子1",
            time: "1小时前",
            bgColor: "#B758FD",
        },
        {
            key: "2",
            icon: "male",
            iconcolor: "#667EBA",
            tag: "拼车",
            title: "下午杭麻三缺一打钱2-5",
            name: "多多混子2",
            time: "1小时前",
            bgColor: "#FE7E41",
        },
        {
            key: "3",
            icon: "male",
            iconcolor: "#667EBA",
            tag: "运动",
            title: "下午杭麻三缺一发钱2-5",
            name: "多多混子3",
            time: "1小时前",
            bgColor: "#B758FD",
        },
        {
            key: "4",
            icon: "female",
            iconcolor: "#EA7C75",
            tag: "聚餐",
            title: "下午杭麻三缺一送钱2-5",
            name: "多多混子4",
            time: "1小时前",
            bgColor: "#FE7E41",
        },
        {
            key: "5",
            icon: "female",
            iconcolor: "#EA7C75",
            tag: "聚餐",
            title: "下午杭麻三缺一送钱2-5",
            name: "多多混子4",
            time: "1小时前",
            bgColor: "#FE7E41",
        },
        {
            key: "6",
            icon: "female",
            iconcolor: "#EA7C75",
            tag: "聚餐",
            title: "下午杭麻三缺一送钱2-5",
            name: "多多混子4",
            time: "1小时前",
            bgColor: "#FE7E41",
        },
    ];
    useEffect(() => {
        (async () => {
            const userinfo = await AsyncStorage.getItem("userInfo");
            if (userinfo) {
                setUserInfo(JSON.parse(userinfo));
            }
            // await axios
            //     .get("http://47.111.227.58:3000/dynamic/getactivity")
            //     .then((res) => {
            //         console.log(res.data.results);
            //         setActivityList(res.data.results);
            //         //   setDy_id(res.data.results[0].id);
            //     });
        })();
    }, []);
    useEffect(() => {
        (async () => {
            if (userInfo.username) {
                axios.get("http://47.111.227.58:3000/dynamic/getUserPostedAndMarkedDynamics",{
                    params:{
                        username:userInfo.username
                    }
                })
                    .then((res) => {
                        // console.log(res.data);
                        let postedDynamics = [];
                        let markedDynamics = [];
                        if(res.data.postedDynamics !== null){
                            postedDynamics = res.data.postedDynamics;
                        }
                        if(res.data.markedDynamics !== null){
                            markedDynamics = res.data.markedDynamics;
                        }
                        postedDynamics.push(...markedDynamics);
                        setActivityList(postedDynamics);
                        //   setDy_id(res.data.results[0].id);
                    });
            }
        })();
    }, [userInfo]);

    const tagsData = ActivityTypes.map((type, index) => ({
        type: type,
        iconColorKey: `TagColor${(index % 9) + 1}`,
        color: color[index],
    }));
    const handleTagPress = (type) => {
        setSelectedActivity(type);
    };
    const renderItem = ({ item }) => {
        return (
            <Pressable
                onPress={() => navigation.navigate("局情", { id: item.id })}
            >
                <View style={styles.activityItem}>
                    <View
                        style={[
                            styles.activityColor,
                            { backgroundColor: color[ActivityTypes.indexOf(item.board)] },
                        ]}
                    >
                        <Text style={styles.activityColorText}>{item.board}</Text>
                    </View>
                    <View style={styles.activityContent}>
                        <View style={styles.activityContentTop}>
                            <Text style={styles.activityContentText}>{item.desc}</Text>
                        </View>
                        <View style={styles.activityContentBottom}>
                            <Text style={styles.activityContentBottomText1}>
                                局长: {item.username}
                                {/* <Icon1 name={item.icon} size={14} color={item.iconcolor}></Icon1> */}
                            </Text>
                            <Text style={styles.activityContentBottomText2}>
                                {item.uploadTime}
                            </Text>
                        </View>
                    </View>
                </View>
            </Pressable>
        );
    };

    return (
        <View style={styles.container}>
            <FlatList
                data={activityList}
                renderItem={renderItem}
                keyExtractor={(item) => item.id}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#FAD874",
        width: "100%",
        height: "100%",
        paddingTop: Constants.statusBarHeight,
    },
    header: {
        flexDirection: "row",
        padding: 10,
    },
    headertitle1: {
        color: "#241B23",
        fontSize: 12,
        fontWeight: "bold",
        marginTop: 10,
        textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)',
    },
    headertitle2: {
        color: "#F86869",
        fontSize: 20,
        fontWeight: "bold",
        marginLeft: 5,
        marginRight: 5,
        textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)',
    },
    guide: {},
    guideimage: {
        width: "94%",
        margin: 10,
        marginRight: 20,
        marginTop: -20,
    },
    Button: {
        flexDirection: "row",
        width: "100%",
        justifyContent: "space-between",
        marginTop: -25,
    },
    button: {
        width: "50%",
        marginTop: -10,
    },
    buttonimageleft: {
        width: "90%",
        marginLeft: 10,
    },
    buttonimageright: {
        width: "90%",
        marginTop: -7,
        marginLeft: 8,
    },
    Tags: {
        width: "100%",
        height: "15%",
        display: "flex",
        flexDirection: "row",
        flexWrap: "wrap",
    },
    TopTags: {
        flexDirection: "row",
        width: "100%",
        height: "50%",
    },
    BottomTags: {
        flexDirection: "row",
        width: "100%",
        height: "50%",
        marginTop: -10,
    },
    Tag: {
        flexDirection: "row",
        width: "18%",
        backgroundColor: "#FFFDF1",
        borderBlockColor: "#000",
        borderWidth: 2,
        borderRadius: 5,
        boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.1)',
        margin: 10,
        marginLeft: 6,
        marginRight: 0,
        display: "flex",
        alignItems: "center",
        // padding: 5,
    },
    TagColor1: {
        width: "10%",
        height: "100%",
        backgroundColor: "#4094F7",
        display: "flex",
        alignItems: "flex-start",
    },
    TagColor2: {
        width: "10%",
        height: "100%",
        backgroundColor: "#FE6386",
        display: "flex",
        alignItems: "flex-start",
    },
    TagColor3: {
        width: "10%",
        height: "100%",
        backgroundColor: "#F6A514",
        display: "flex",
        alignItems: "flex-start",
    },
    TagColor4: {
        width: "10%",
        height: "100%",
        backgroundColor: "#FD7C42",
        display: "flex",
        alignItems: "flex-start",
    },
    TagColor5: {
        width: "10%",
        height: "100%",
        backgroundColor: "#FE655F",
        display: "flex",
        alignItems: "flex-start",
    },
    TagColor6: {
        width: "10%",
        height: "100%",
        backgroundColor: "#00B773",
        display: "flex",
        alignItems: "flex-start",
    },
    TagColor7: {
        width: "10%",
        height: "100%",
        backgroundColor: "#B758FD",
        display: "flex",
        alignItems: "flex-start",
    },
    TagColor8: {
        width: "10%",
        height: "100%",
        backgroundColor: "#03BBD1",
        display: "flex",
        alignItems: "flex-start",
    },
    TagColor9: {
        width: "10%",
        height: "100%",
        backgroundColor: "#4CA4FD",
        display: "flex",
        alignItems: "flex-start",
    },
    TagIcon: {
        color: "#9B999C",
        display: "flex",
    },
    TagTitle: {
        fontSize: 14,
        fontWeight: "bold",
        color: "#9B999C",
        display: "flex",
    },
    TagContent: {
        fontSize: 14,
        fontWeight: "bold",
        color: "#24201D",
        display: "flex",
        marginLeft: 12,
    },
    activityItem: {
        // width: '95%',
        // height: '15%',
        backgroundColor: "#FFFDF1",
        flexDirection: "row",
        borderBlockColor: "#000",
        borderWidth: 2,
        borderRadius: 5,
        boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.1)',
        marginLeft: 10,
        marginRight: 10,
        marginBottom: 5,
    },
    activityColor: {
        width: "15%",
        backgroundColor: "#B758FD",
        borderRadius: 2,
        flexDirection: "column",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
    },
    activityColorText: {
        display: "flex",
        fontSize: 26,
        fontWeight: "bold",
        color: "#FDFDFB",
        // flexDirection: 'column',
    },
    activityContent: {
        width: "85%",
        // height: '100%',
        flexDirection: "column",
        justifyContent: "space-between",
        marginTop: 5,
        marginBottom: 5,
    },
    activityContentTop: {
        // width: '95%',
        // height: '65%',
        display: "flex",
        flexDirection: "row",
        paddingLeft: 10,
        alignItems: "center",
    },
    activityContentText: {
        display: "flex",
        fontSize: 16,
        fontWeight: "bold",
        color: "#262220",
        // marginLeft: 10,
    },
    activityContentBottom: {
        flexDirection: "row",
        // width: '95%',
        // height: '35%',
        display: "flex",
        justifyContent: "space-between",
    },
    activityContentBottomText1: {
        fontSize: 14,
        // fontWeight: 'bold',
        color: "#5A678B",
        paddingLeft: 10,
    },
    activityContentBottomText2: {
        fontSize: 14,
        fontWeight: "bold",
        color: "#797572",
        paddingLeft: 10,
        paddingRight: 10,
    },
    searchButtonContainer: {
        position: "absolute",
        flexDirection: "row",
        right: 10,
        bottom: 10,
        backgroundColor: "#FD6A63",
        padding: 10,
        borderRadius: 25,
        // width: 150,
        alignItems: "center",
    },
});

export default MyActivity;
